<template>
  <base-header></base-header>
  <section class="site-page-title" :style="sitePageTitleClass">
    <div class="site-page-title-content text-center">
      <div class="container">
        <!-- <div class="subtitle">{{ $route.meta.subTitle }}</div> -->
        <!-- <div class="title">{{ $route.meta.title }}</div> -->
      </div>
    </div>
  </section>
  <router-view :key="$route.fullPath"></router-view>

  <base-footer></base-footer>
</template>

<script>
import BaseHeader from "@/components/base/base-header.vue";
import BaseFooter from "@/components/base/base-footer.vue";

import {
  reactive,
  toRefs,
  computed,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
export default {
  name: "ContentLayout",
  components: { BaseHeader, BaseFooter },
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();

    const data = reactive({
      sitePageTitleClass: {
        "background-image": computed(() => {
          var imgUrl = proxy.$route.meta.imgUrl;
          var backgroundImageStyle = imgUrl
            ? `url(${imgUrl})`
            : `url(${require("@/assets/image/blog-banner.jpg")})`;
          return backgroundImageStyle;
        }),
        "background-repeat": "no-repeat",
        "background-position": "center",
      },
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {});
    return {
      ...refData,
    };
  },
};
</script>
<style scoped>
.site-page-title {
  position: relative;
  min-height: 298px;
  overflow: hidden;

  background-size: cover;
}

.site-page-title-content {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.site-page-title-content .subtitle {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.site-page-title-content .title {
  font-size: 70px;
  font-weight: 300;
  letter-spacing: -2px;
}
</style>
